<template>
  <div class="detail">
    <h1>员工详情</h1>
    <el-form
      :model="ruleForm2"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="员工姓名：">{{ruleForm2.staffName}}</el-form-item>
      <el-form-item label="照片：">
        <img :src="ruleForm2.imgUrl" alt style="width:97px;height:137px;">
      </el-form-item>
      <el-form-item label="创建人：">{{ruleForm2.createName}}</el-form-item>
      <el-form-item label="性别：" class="sex">{{ruleForm2.sex ==1 ? '男':'女'}}</el-form-item>
      <el-form-item label="手机：" prop="phone">{{ruleForm2.phone}}</el-form-item>
      <el-form-item label="入职日期：" prop="ruzhi">{{ruleForm2.ruzhi}}</el-form-item>
      <el-form-item label="岗位：" prop="gangwei">{{ruleForm2.gangwei}}</el-form-item>
      <el-form-item label="状态：">{{ruleForm2.status}}</el-form-item>
      <el-form-item label="出生日期：">{{ruleForm2.chusheng}}</el-form-item>
      <el-form-item label="年龄(周岁)：" prop="age">{{ruleForm2.age}}</el-form-item>
      <el-form-item label="最高学历：">{{ruleForm2.xueli}}</el-form-item>
      <el-form-item label="籍贯：">{{ruleForm2.jiguantext}}</el-form-item>
      <el-form-item label="政治面貌：">{{ruleForm2.zhengzhimianmao}}</el-form-item>
      <el-form-item label="详细地址：">{{ruleForm2.zhuzhi}}</el-form-item>
      <el-form-item label="血型：">{{ruleForm2.xuexing}}</el-form-item>
      <!-- <el-form-item label="星座：">{{ruleForm2.xingzuo}}</el-form-item> -->
      <el-form-item label="健康状况：">{{ruleForm2.jiankangzhuangkuang}}</el-form-item>
      <el-form-item label="住房：">{{ruleForm2.zhufang}}</el-form-item>
      <el-form-item label="民族：">{{ruleForm2.minzu}}</el-form-item>
      <el-form-item label="婚育：">{{ruleForm2.hunyu}}</el-form-item>
      <el-form-item label="驾照：">{{ruleForm2.jiazhao}}</el-form-item>
      <el-form-item label="退伍证：">{{ruleForm2.tuiwuzheng}}</el-form-item>
      <el-form-item label="护照：">{{ruleForm2.huzhao}}</el-form-item>
      <el-form-item label="疾病史：">{{ruleForm2.bingli}}</el-form-item>
      <el-form-item label="身高(CM)：">{{ruleForm2.height}}</el-form-item>
      <el-form-item label="体重(KG)：">{{ruleForm2.weight}}</el-form-item>
      <el-form-item label="毕业院校："> {{ruleForm2.biyeyuanxiao}}</el-form-item>
      <el-form-item label="所学专业：">{{ruleForm2.zhuanye}}</el-form-item>
      <el-form-item label="特长：">{{ruleForm2.techang}}</el-form-item>
      <el-form-item label="爱好：">{{ruleForm2.aihao}}</el-form-item>
      <el-form-item label="身份证号">{{ruleForm2.shenfenzheng}}</el-form-item>
      <h2>亲属信息</h2>
      <el-form-item label="关系：">{{ruleForm2.guanxi}}</el-form-item>
      <el-form-item label="姓名：">{{ruleForm2.xingming}}</el-form-item>
      <el-form-item label="工作单位：">{{ruleForm2.danwei}}</el-form-item>
      <el-form-item label="职务：">{{ruleForm2.zhiwei}}</el-form-item>
      <el-form-item label="电话：">{{ruleForm2.dianhua}}</el-form-item>
      <el-form-item class="btn" aria-disabled="false">
        <el-button type="primary" @click="close">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import Axios from "axios";
export default {
  props: ["ruleForm2"],
  data() {
    return {
    };
  },
  methods: {
    close() {
      this.$emit('show',false)
    },
    getUrl(data) {
      console.log((this.ruleForm2.imgUrl = data));
    }
  }
};
</script>

<style lang="stylus" scoped>
.detail {
  position: absolute;
  top: 0px;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 111;
  background: #fff;
  padding: 20px 30px 30px 30px;
}

form {
  width: 600px;
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    justify-content: space-around;
    width: 299px;
  }

  .textarea {
    width: 600px;
  }

  .btn {
    width: 100%;
  }

  h2 {
    font-size: 18px;
    width: 100%;
    margin: 10px 0 26px 0;
  }
}

.el-date-editor {
  width: 199px !important;
}
</style>
